<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量导入的使用</title>
</head>
<body>
    
</body>
<script type="module">
    import * as api from './module/demo1.js'  //此处的语法很像数据库的语法  as 相当于是起了一个别名的意思
    console.log(api)
    /*
        Module {Symbol(Symbol.toStringTag): "Module"}
            age: (...)
            lesson: (...)
            name: (...)
            show: (...)

        这个就是批量导入的操作  批量能够一次性的导入模块内的所有有导出的数据 
            要使用的时候就要像使用对象的方式来使用 对象名.属性名
    */
    api.show()  //demo1.js

    /*
        建议：
            在我们以后使用打包工具打包的时候 尽量导入的时候不要使用批量的导入导出
                原因很简单  就跟以上的例子一样  我只使用到了show方法  其他的都没有使用到
            如果这样 打包的时候也全部一起打包 那么这样会使得我们项目的体积变得很大 
                这个就不是我们想要的

            就像使用 element-ui的时候  我们并没有使用到所有的组件  这时候我们只需要按需导入即可  如果全部都导入就会导致体积变得很大
                项目的启动速度慢 等一系列的问题
    */
</script>
</html>